<template>
    <div>
        <shop-header
            title="商品详情"
            leftIconName="arrow-left"
            rightIconName="首页">
        </shop-header>

        <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                <img style="width:100%;heigth: 300px;" :src="img1" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img style="width:100%;heigth: 300px;" :src="img2" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img style="width:100%;heigth: 300px;" :src="img3" alt="">
            </van-swipe-item>
        </van-swipe>

        <div style="padding-left: 10px;box-sizing-border-box;">
            <div>
                <span style="color: red; font-size: 18px;">￥{{goodsInfo.info.retailPrice}}</span>
                <span style="color: #aaa;text-decoration: line-through;">￥{{goodsInfo.info.counterPrice}}</span>
            </div>

            <div>
                {{goodsInfo.info.name}}
            </div>
            <div style="color: #aaa;font-size: 12px;">
                {{goodsInfo.info.brief}}
            </div>
        </div>

        <van-cell title="规格" style="margin-top:10px;" is-link value="请选择" />
        <van-cell title="属性" style="margin-top:10px;" is-link />
        <van-cell title="运费" style="margin-top:10px;" value="更多团购商品" />

        <div style="margin-top: 20px;">
            <div style="text-align: center;">商品详情</div>
            <p>{{goodsInfo.info.detail}}</p>
        </div>

        <div class="info-detail-footer">
            <div @click="toPage" style="display: flex;justify-content:center;align-items:center;width:50px;height: 50px;">
                <van-icon name="shopping-cart-o" :badge="shopCarCount" />
            </div>
            <van-icon style="width:50px;height: 50px;text-align:center;line-height:50px;" name="star-o" />
            <div class="add-shop-btn" @click="addShopCar">加入购物车</div>
            <div class="buy-btn">立即购买</div>
        </div>
    </div>
</template>



<script>
import ShopHeader from '../components/shopHeader.vue'
import request from '../fetch/index.js'
    export default {
        components: {
            ShopHeader
        },
        data () {
            return {
                goodsInfo: {
                    info: {}
                },
                shopCarCount: 0,
                img1: require('../assets/images/apple-1.jpg'),
                img2: require('../assets/images/apple-2.jpg'),
                img3: require('../assets/images/apple-3.jpg')
            }
        },
        mounted () {
            this.getShopCarCount()
            this.getGoodsDetail()
        },
        methods: {
            toPage () {
                this.$router.push({
                    path: '/shopCar'
                })
            },
            getGoodsDetail () {
                request({
                    url: 'http://192.168.200.251:8888/wx/goods/detail',
                    method: 'get',
                    params: {
                        id: this.$route.query.id
                    }
                }).then(res => {
                    this.goodsInfo = res.data.data

                    console.log(this.goodsInfo)
                })
            },
            getShopCarCount () {
                request({
                    url: 'http://192.168.200.251:8888/wx/cart/goodscount',
                    method: 'get'
                }).then(res => {
                    console.log('asdasdadasas', res)
                    this.shopCarCount = res.data.data
                })
            },
            addShopCar () {
                request({
                    url: 'http://192.168.200.251:8888/wx/cart/add',
                    method: 'post',
                    data: {
                        goodsId: this.$route.query.id,
                        number: 1,
                        productId: this.goodsInfo.productList[0].id
                    }
                }).then(res => {
                    console.log('添加购物车')
                    // console.log('asdasdadasas', res)
                    // this.shopCarCount = res.data.data
                })
            }
        }
    }
</script>


<style lang="scss" scoped>
.info-detail-footer {
    display: flex;
}

.add-shop-btn {
    flex: 1;
    height: 50px;
    background: #ff976a;
    text-align: center;
    line-height: 50px;
    color: #fff;
}

.buy-btn {
    flex: 1;
    height: 50px;
    background: #e4393c;
    text-align: center;
    line-height: 50px;
    color: #fff;
}
</style>
